<template>
  <div>
    <div class="map">
      <el-main class="slideshow">
        <div>
          <el-carousel :interval="4000" type="card" height="300px">
            <!-- 轮播图图片 -->
            <el-carousel-item v-for="item in imagesbox" :key="item.id">
              <img :src="item.idView" class="image" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-main>
      <p class="type">有好货</p>
      <el-container>
        <!-- 商品推荐前3个 -->
        <el-aside class="recommend">
          <el-image style="width: 299px; height: 646px" :src="url"></el-image>
        </el-aside>
        <el-row class="form">
          <el-col
            :class="index"
            v-for="(goods, index) in All_goods"
            :key="index"
          >
            <a href="javascript:void(0);" @click="search(goods)"  id="one">
              <img :src="src + goods.details.image" alt="" />
              <h2 class="name">{{ goods.name }}</h2>
              <h3 class="describe">{{ goods.msg }}</h3>
              <p class="money">
                <el-link type="warning">{{ goods.specifications[0].price }}元 </el-link>
              </p>
            </a>
          </el-col>
          <el-col class="eight" style="border: none">
            <a href="/all">点击浏览更多>></a>
          </el-col>
        </el-row>
      </el-container>
    </div>
  </div>
</template>
<script>
import { getlistMerchandise } from "../api/product.js";

export default {
  data() {
    return {
      imagesbox: [
        { id: 0, idView: require("@/assets/1.jpeg") },
        { id: 1, idView: require("@/assets/2.jpeg") },
        { id: 2, idView: require("@/assets/3.jpeg") },
        { id: 3, idView: require("@/assets/4.jpeg") },
        { id: 4, idView: require("@/assets/5.jpeg") },
      ],
      fits: ["fill"],
      url: "http://106.15.179.105:3000/public/imgs/phone/phone.png",
      All_goods: [],
      pager: {
        //每页显示条目个数
        pageSize: 3,
        currentPage: 1,
        totalSize: 0,
      },
      src:"http://localhost:5000"+"/files/picPath?picUrl=",
    };
  },
  methods: {
    //设置游览器宽高
    setSize() {
      // 通过浏览器宽度（图片宽度）计算高度
      this.bannerHeigth = (400 / 1920) * this.screenwith;
    },
    //拉取所有商品数据
    fetchData() {
      getlistMerchandise(this.pager)
        .then((res) => {
          this.All_goods = res.data.data
          console.log(res);         
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search(goods) {
      console.log(goods.id);
      this.$router.push("/particulars?id=" + goods.id)
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>
<style>
.type {
  font-size: 25px;
  margin-left: 52px;
  color: rgba(5, 13, 90, 0.616);
}
.all {
  margin: 0px !important;
  padding: 0px !important;
  list-style: none !important;
  text-decoration: none !important;
  height: 100% !important;
}
.head {
  width: 100vw !important;
}

.image {
  margin-top: auto;
}
.el-image__error,
.el-image__placeholder {
  width: 100%;
  height: 100%;
}
.recommend {
  background-color: #99a9bf;
  width: 250px;
  height: 650px;
  margin-left: 55px;
  margin-top: 10px;
}
.form img {
  width: 210px !important;
  border: none !important;
}
.form :hover {
  border: 0.9px solid #868484;
}
#one {
  border: none;
}
.el-col {
  width: 220px !important;
  height: 320px;
  margin-left: 13px;
  margin-top: 10px;
}

.name {
  font-size: 16px;
  border: none !important;
}
.name,
.describe {
  font-weight: 400;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: none !important;
}
.describe {
  margin: 5px 10px;
  height: 18px;
  font-size: 12px;
  color: #b0b0b0;
  border: none !important;
}
.money {
  margin: 10px 10px 10px;
  text-align: center;
  border: none !important;
}
.money a {
  border: none !important;
}
.money .el-link {
  font-size: 20px;
}
.money a :hover {
  border: none !important;
}

.eight {
  text-align: center;
  line-height: 280px;
}
.eight a {
  border: none !important;
}
.el-col {
  border: 0.9px solid #f0f0f0;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
